<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<link href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css" rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
  .tab{position: relative;width: 100%;height: 240px;background: #7bc1d2}
    .tab-wrap{position: absolute;left: 50%;top:50%;margin-left: -205px;margin-top: -30px;}
    .tab span{cursor: pointer;margin-right: 50px;width: 180px;height:60px;line-height: 60px;text-align: center;font-size: 26px;display: inline-block;}
    .tab span.active{color: #fff;border: 2px solid #fff;}
    .cases-wrap{margin-top: 100px;padding-bottom: 80px;}
    .cases-PC .case-list{width: 342px;height: 288px;margin-bottom: 60px;border: 1px solid #dddddd}
    .cases-PC img{border: 0;width: 340px;height:227px;}
    .cases-PC .txt{font-size: 18px;color: #333;height: 60px;line-height: 60px;text-align: center;width: 100%;border-top: 1px solid #ddd;display: block;}
    .cases-phone{display: none;}
    .cases-phone .case-list{margin-bottom: 60px;}
    .cases-phone .case-list .bg{margin: 0 auto;position: :relative;height: 530px;width: 262px;display: block;background: url("${path }/resource/images/phone-bg.png") no-repeat;
    background-size: contain;margin-bottom: 20px;}
    .cases-phone .case-list img{    position: relative;border: 1px solid #000; top: 62px;left: 16px;width: 231px;height: 409px;display: block;}
    .pages{float: right;margin: 0 0 80px;}
    .pages a{cursor:pointer;border-radius:4px;border:1px solid #fff;color: #999999;width: 28px;height: 28px;line-height: 28px;  text-align: center;display: inline-block}
    .pages a.active{background: #4095dd;color: #ffffff}
    /* .pages a:hover{background: #f6f6f6;border: 1px solid #ececec}  */ 
</style>
</head>
<body class="">
  <form class="navbar-form search"  id="dataform" onsubmit="javascripr:return false;" style="display:none">
        <div class="search">
			<input type="hidden" name="offset" id="_offset"  value="0" />
			<input type="hidden" id="limit" name="limit"   value="10" />
			<input type="hidden" id="artTypeId" name="artTypeId" value="39"/>
		</div>
        <div class="form-group">
            <input type="text" name="title" class="form-control" placeholder="请输入标题">
			<button class="btn btn-info" onclick="Pagination.serchDate()">搜索</button>
        </div>
        
    </form>
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="tab">
    <div class="tab-wrap">
      <span class="active" >PC端</span>
      <span onclick="changeSeach(40)">手机端</span>
    </div>
  </div>
	<div  id="app">
	<div class="container">
    <div class="cases-wrap">
      <div class="cases-PC">
        <div class="row">
			<div class="col-md-4" v-for="art in arts">
				<div class="case-list">
				<a  target="blank"
									:href="'${path}/redirect/article?id='+art.artId">
					<img :src="art.artImage" alt="" /> <span class="txt">{{art.artTitle}}</span>
					</a>
				</div>
			</div>
        </div>
        <div class="pages" id="pagingBox">
          
        </div>
      </div>
       <div class="cases-phone" id="app2">
        <div class="row">
				<div class="col-md-3" v-for="art in arts2">
					<div class="case-list text-center">
						<span class="bg">
						<a  target="blank"
									:href="'${path}/redirect/article?id='+art.artId">
						<img :src="art.artImage" alt="" /></a></span>
						<span class="txt">{{art.artTitle}}</span>
					</div>
				</div>
        </div>
        <div class="pages" id="pagingBox2">
          
        </div>
      </div> 
    </div>
  </div>		
	</div>
	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MForm.js"></script>
	<script type="text/javascript"
		src="${path }/resource/model/js/Pagination.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
	 var falg=true;
	 function changeSeach(typeId){
		    console.log(typeId);
	    	$("#artTypeId").val(typeId);
	    	$("#_offset").val(0);
	    	if(typeId==40){
	    		if(falg){
	    			app.loadArt2(); 
	    		}
	    		falg=false;	    		
	    	}	    	  	
	    }
	 
	var app =  new Vue({
		el : '#app',
		data : {
			arts:[],
			arts2:[]
		},
		methods : {
			loadArt:function(){
				var pageSize = 10;
				Pagination.init({
					url : "${path}/findNews",
					pageSize : pageSize,
					builderDate : function(loj) {
						
						app.arts = loj.getValue("rows");
						console.log(app.arts)
					} 
				}).serchDate();
				
			}, 
			 loadArt2:function(){
				var pageSize = 10;
				 Pagination.init({
					url : "${path}/findNews",
					pageSize : pageSize,
					pagingBoxSelect:"#pagingBox2",
					showdataBoxSelect:"#showdataBox2",
					builderDate : function(loj) {
						
						app.arts2 =loj.getValue("rows");	
						console.dir(app.arts2)
					} 
				}).serchDate(); 
				
			} 
		}, 
	});
	app.loadArt(); 
	$("#toTop").click(function() {
	      $('body,html').animate({scrollTop:0},500);
	    })
	     $(".tab-wrap>span").click(function () {
	      $(this).siblings().removeClass("active")
	      $(this).addClass("active")
	      $(".cases-wrap>div").hide();
	      $(".cases-wrap>div").eq($(this).index()).show()
	    }) 
	    $(".suspend").mouseover(function() {
	      $(this).stop();
	      $(this).animate({width: 156}, 400);
	    });
	    $(".suspend").mouseout(function() {
	      $(this).stop();
	      $(this).animate({width:36}, 400);
	    });
	    $("#nav").find("li").eq(2).addClass("active");
	</script>
	
</body>
</html>
